<template>
    <div>
        <div class="options-wrapper">
            <div class="search">
                <Input v-model="param"
                       placeholder="姓名或手机号"
                       style="width: 200px"
                       class="search-input"
                       :search="true"
                       @on-change="search"
                       @on-search="search"
                />
                <div>
                    <Select v-model="roleId" @on-change="search">
                        <Option v-for="item in roleList" :value="item.id" :key="item.id">{{item.des}}</Option>
                    </Select>
                </div>
            </div>

            <div class="left-options">
                <Button class="title-option" type="success" @click="add">添加</Button>
            </div>
        </div>
        <!--角色编辑-->
        <Table border :columns="columns" :data="data">
            <template slot-scope="{row}" slot="roles">
                <span v-for="(item,index) in row.roles" :key="index">{{index==0?'':'，'}}{{item.des}}</span>
            </template>
            <template slot-scope="{row}" slot="action">
                <Button type="primary" size="small" style="margin-right: 15px" @click="edit(row)">编辑</Button>
                <Button type="error" size="small" style="margin-right: 15px" @click="remove(row)">删除</Button>
            </template>
        </Table>
        <Page :total="total"
              :current="current"
              @on-change="change"
              class="page"/>
        <teacher-form :modal="modal" :modify="modify"/>
    </div>
</template>

<script>
    import TeacherForm from './TeacherForm'

    export default {
        name: "Teacher",
        created() {
            this.getList();
            this.getRoles();
        },
        components: {
            TeacherForm
        },
        data() {
            return {
                modal: false,
                modify: '',
                total: 10,
                selectIds: [],
                current: 1,
                param: '',
                roleId: '',
                roleList: [],
                columns: [
                    {
                        title: '用户名',
                        key: 'name'
                    }, {
                        title: '手机号',
                        key: 'phone'
                    }, {
                        title: '角色',
                        slot: 'roles'
                    }, {
                        title: '科目',
                        key: 'course'
                    }, {
                        title: '操作',
                        slot: 'action',
                        width: 200,
                        align: 'center'
                    }
                ],
                data: []
            }
        },
        methods: {
            getList() {
                this.$api.userRolePageList({
                    pageNum: this.current,
                    searchDto: {
                        param: this.param,
                        roleIds: this.roleId
                    }
                }).then(res => {
                    console.log("teach", res)
                    this.total = res.total;
                    this.data = res.list;
                })
            },
            //获取老师角色
            getRoles() {
                this.$api.getRoles().then(res => {
                    res.forEach(e => {
                        if (e.des != '学生')
                            this.roleList.push(e);
                    })
                    let all = {des: '全部', code: 'all'}
                    this.roleList.unshift(all);
                })
            },
            add() {
                this.modify = '';
                this.modal = true;
            },
            //编辑
            edit(row) {
                this.modal = true;
                this.modify = {...row};
            },
            search() {
                this.current;
                this.getList();
            },
            change(num) {
                this.current = num;
                this.getList();
            },
            remove(row) {
                this.$Modal.confirm({
                    title: '确认删除:' + row.name + " 吗？",
                    onOk: () => {
                        this.$api.userDelete({id: row.id})
                            .then(() => {
                                this.$Message.success('删除成功')
                                this.getList();
                            })
                    }
                })
            },
            //关闭编辑框
            cancel() {
                this.modal = false;
            },
            course(row) {
                this.$router.push({path: 'course', query: row})
            }
        }
    }
</script>

<style scoped>
    .options-wrapper {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .left-options {
        display: flex;
        align-items: flex-start;
    }

    .search {
        display: flex;
    }

    .title-option {
        display: inline-block;
        margin-right: 10px;
    }
</style>
